<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no" /> 
    <link href="Content/bootstrap.css" rel="stylesheet"/>
	<link href="content/font-awesome.css" rel="stylesheet" />
    <link href="Content/base.css" rel="stylesheet"/>
    <link href="Content/animate.css" rel="stylesheet"/>
</head>
<body>
    <div class="loading-fixed">
		<div class="loading-text" id="loading-text"></div>
		<div class="sk-wave">
			<!--<div class="sk-rect sk-rect1"></div>
			<div class="sk-rect sk-rect2"></div>
			<div class="sk-rect sk-rect3"></div>
			<div class="sk-rect sk-rect4"></div>-->
		</div>
    </div>
    <div id="app">
        <div class="msg-fixed">     
            <div class="msg-container">
                <div class="msg-head">
                    <img v-show="popMsg.level==='suc'" src="images/msg-suc.png" alt="" />
                    <img v-show="popMsg.level==='err'" src="images/msg-err.png" alt="" />
                    <img v-show="popMsg.level==='ask'" src="images/msg-ask.png" alt="" />
                    <span :class="popMsgColor">{{popMsg.msg}}</span>
                </div>
                <div class="msg-btn-container">
                    <a @click="popHandle('cancel')" v-show="popMsg.type==='confirm'"  class="btn btn-grey" style="margin-right:46px;">取消</a>
                    <a @click="popHandle('ok')" v-show="popMsg.type==='alert'||popMsg.type==='confirm'" class="btn btn-blue">确认</a>
                </div>
            </div>
        </div>
        <div id="top">
			<img src="images/bg_top.png" alt="" />
        </div>
        <div id="center">
            <div class="center-left">
                <div v-show="page==='code'" class="page-code">
                    <div class="page-code-tip">
                       请输入16位验证码
                    </div>
                    <input type="text" :value="code" readonly/>
                    <div class="key-container">
                        <div class="key-list">
                            <img v-for="key in keys" :src="'images/'+key+'.png'" class="key" alt="" @click="pressKey(key)"/>
                        </div>
                        <div class="key-confirm">
                            <img src="images/sure.png" alt="" @click="queryCode"/>
                            <img src="images/cancel.png" style="margin-top: 33px;" alt="" @click="cancelCode"/>
                        </div>
                    </div>
                </div>
                <div v-show="page==='barcode'">
                    <img src="images/barcode_scan.png" alt="" style="margin-top:-48px;margin-left:-57px;"/>
                </div>
                <div v-show="page==='suc'" style="position: relative;">
                    <img src="images/suc.png" alt="" style="margin-top:-48px;margin-left:-57px;"/>
                    <div class="btn-over" @click="this.code='';goPage('code')" style="width: 192px;height: 66px;position: absolute;top: 425px;left: 100px;"></div>
                    <div class="btn-over" @click="this.code='';goPage('code')" style="width: 192px;height: 66px;position: absolute;top: 425px;left: 350px;"></div>
                </div>
                <div v-show="page==='err'" style="position: relative;">
                    <img src="images/err.png" alt="" style="margin-top:-48px;margin-left:-57px;"/>
                    <div class="btn-over" @click="this.code='';goPage('code')" style="width: 192px;height: 66px;position: absolute;top: 425px;left: 100px;"></div>
                    <div class="btn-over" @click="this.code='';goPage('code')" style="width: 192px;height: 66px;position: absolute;top: 425px;left: 350px;"></div>
                </div>
            </div>
            <div class="center-right" v-if="page!=='order'">
                <div class="code" @click="goPage('code')">
                    <img src="images/code_get.png" alt="" />
                </div>
                <div class="barcode" @click="goPage('barcode')">
                    <img src="images/barcode_get.png" alt="" />
                </div>
            </div>
        </div>
		<!-- 新增 -->
		<div class="order-detail" v-show="page==='order'">
			<div v-show="quantity_enabled===0" class="order-is-over">本单已使用完毕</div>
			<div class="order-change">
				<!-- 产品名称 -->
				<div class="product-name">{{productName}}</div>
				<!-- 可消费票数 -->
				<div class="tickets-total">{{quantity_enabled}}</div>
				<div class="tickets-will-use">
					<!--按钮：减-->
					<span class="icon-minus" @click="minusClick"></span>
					<!-- 本次使用票数量 -->
					<span class="use-number">{{quantity}}</span>
					<!--按钮：加-->
					<span class="icon-add" @click="addClick"></span>
				</div>
			</div>
			<!--订单编号-->
			<div class="order-num">{{orderid}}</div>
			<!--验证码-->
			<div class="identify-code"><span class="txt">验证码：</span>{{code}}</div>
			<!--按钮：确认打印-->
			<img v-if="quantity_enabled===0||quantity===0||canPrint==false" src="images/btn-confirm.png" class="btn-disabled">
			<img v-else src="images/btn-confirm.png" class="btn-sure" @click="printCode">
			<!--按钮：取消-->
			<img src="images/btn-cancel.png" class="btn-cancel" @click="this.code='';goPage('code')">
		</div>
        <div id="bottom">
            <img src="images/bg_bottom.png" alt="" />
        </div>
        <input v-show="false" style="position:absolute;bottom:0;left:0;" @click="showDevTools" type="button" value="打开调试" />
    </div>
    <script src="Scripts/jquery-3.1.1.js"></script>
    <script src="Scripts/bootstrap.js"></script>
    <script src="Scripts/vue.js"></script>
	<script src="Scripts/base.js"></script>
    <script>       
        (function () {
            window.vm = new Vue({
                el: '#app',
                data: {
                    popMsg: {
                        level: 'suc', // err,suc,ask
                        type: 'alert',// alert, confirm
                        msg:'',
                        okHandle: null,
                        cancelHandle:null,
                    },
					page: "code",// "code", "barcode", "suc", "err","order"
                    code: "",
                    keys:["1","2","3","4","5","6","7","8","9","del","0","clear"],
					productName:'',
					quantity_enabled:0,
					quantity:0,
					orderid:'',
					canPrint:false,
					timer:null
                },
                computed: {
                    popMsgColor: function () {
                        if (this.popMsg.type === 'confirm') {
                            return '';
                        }
                        else if (this.popMsg.type === 'alert' && this.popMsg.level === 'suc') {
                            return 'color-dark-green';
                        } else if (this.popMsg.type === 'alert' && this.popMsg.level === 'err') {
                            return 'color-yellow';
                        }
                    }
                },
                mounted: function () {
                    this.$nextTick(function () {
                        $(document).keyup(function (event) {
                            switch (event.keyCode) {
                                case 27:
                                    host.exit();
                                default:
                                    break;
                            }
                        });
                        if (typeof host !== 'undefined') {
                            host.mounted();
                        }
                    })
                },
                methods: {
                    popShow: function (level, type, msg, ok, cancel) {
                        // 防止重复弹窗冲突
                        if ($('.msg-fixed').hasClass('visible')) {
                            return;
                        }

                        // 设置弹窗信息
                        this.popMsg.level = level;
                        this.popMsg.type = type;
                        this.popMsg.msg = msg;
                        this.popMsg.okHandle = ok;
                        this.popMsg.cancelHandle = cancel;

                        // 弹窗
                        $('.msg-fixed').addClass('visible')
                    },
                    popHandle: function (type) {
                        $('.msg-fixed').removeClass('visible')
                        if (type === 'ok' && this.popMsg.okHandle) {
                            this.popMsg.okHandle();
                            this.popMsg.okHandle = null;
                        } else if (type === 'cancel' && this.popMsg.cancelHandle) {
                            this.popMsg.cancelHandle();
                            this.popMsg.cancelHandle = null;
                        }
                    },
                    showDevTools: function () {
                        host.showDevTools();
                    },
                    goPage: function (page) {
                        if (this.page === "barcode" && page === "code") {
                            host.stopScan();
                        }

						clearTimeout(this.timer)
						this.timer=null
						
                        this.page = page;
						
                        if (page === "barcode") {
                            host.startScan();
                        }
                    },
                    pressKey: function (key)
                    {
                        if (key === "del") {
                            if (this.code.length > 0) {
                                this.code = this.code.substr(0, this.code.length - 1);
                            }
                            return;
                        }

                        if (key === "clear") {
                            this.code = "";
                            return;
                        }

                        this.code += key;
                    },
                   queryCode: function ()
                    {
                        if (this.code == null || this.code === "" || (this.code.length !== 16 && this.code.length !== 12)) {
                            $$.error("请输入正确的验证码")
                            return;
                        }

                        $$.blockUI();
                        host.queryByCode(this.code);
                    },
					printCode: function ()
                    {
                        if (this.code == null || this.code === "" || (this.code.length !== 16 && this.code.length !== 12)) {
                            $$.error("请输入正确的验证码")
                            return;
                        }
						//点击确认打印按钮时，定时器15秒后才可点击
						var that=this
						this.canPrint=false
						this.timer=setTimeout(function(){
							that.canPrint=true
						},15000)
                        $$.blockUI();
                        host.printByCode(this.code,this.quantity);
                    },
                    cancelCode: function () {
                        // this.goPage("err")
                    },
					minusClick:function(){
						if(this.quantity>1){
							this.quantity--;
						}
					},
					addClick:function(){
						if(this.quantity<this.quantity_enabled){
							this.quantity++;
						}
					}
                }
            });
        })();
    </script>
</body>
</html>
